<template>
  <div class="settings-page">
    <div class="container-custom py-8">
      <h1 class="text-3xl font-bold mb-8">账户设置</h1>
      
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 侧边栏导航 -->
        <div class="lg:col-span-1">
          <div class="card">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              :class="[
                'w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors',
                activeTab === tab.id
                  ? 'bg-primary-50 text-primary-600 border-l-4 border-primary-600'
                  : 'hover:bg-gray-50 border-l-4 border-transparent'
              ]"
              @click="activeTab = tab.id"
            >
              <div :class="tab.icon" class="text-xl" />
              <span>{{ tab.label }}</span>
            </button>
          </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="lg:col-span-3">
          <!-- 基本信息 -->
          <div v-if="activeTab === 'profile'" class="card p-6">
            <h2 class="text-xl font-bold mb-6">基本信息</h2>
            
            <form @submit.prevent="handleSaveProfile">
              <!-- 头像 -->
              <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  头像
                </label>
                <div class="flex items-center space-x-4">
                  <div class="w-20 h-20 rounded-full bg-primary-100 flex items-center justify-center">
                    <div class="i-mdi-account text-4xl text-primary-600" />
                  </div>
                  <button type="button" class="btn-outline">
                    <div class="i-mdi-upload inline-block mr-2" />
                    上传头像
                  </button>
                </div>
              </div>
              
              <!-- 用户名 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  用户名
                </label>
                <input
                  v-model="profile.username"
                  type="text"
                  class="input w-full"
                  placeholder="请输入用户名"
                />
              </div>
              
              <!-- 邮箱 -->
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  邮箱
                </label>
                <input
                  v-model="profile.email"
                  type="email"
                  class="input w-full"
                  placeholder="请输入邮箱"
                  disabled
                />
                <p class="text-xs text-gray-500 mt-1">邮箱不可修改</p>
              </div>
              
              <!-- 手机号 -->
              <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  手机号
                </label>
                <div class="flex space-x-2">
                  <input
                    v-model="profile.phone"
                    type="tel"
                    class="input flex-1"
                    placeholder="请输入手机号"
                  />
                  <button type="button" class="btn-outline whitespace-nowrap">
                    绑定手机
                  </button>
                </div>
              </div>
              
              <button type="submit" class="btn-primary">
                保存修改
              </button>
            </form>
          </div>
          
          <!-- 安全设置 -->
          <div v-else-if="activeTab === 'security'" class="card p-6">
            <h2 class="text-xl font-bold mb-6">安全设置</h2>
            
            <!-- 修改密码 -->
            <div class="mb-6 p-4 border rounded-lg">
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium mb-1">登录密码</div>
                  <div class="text-sm text-gray-500">
                    定期修改密码可以提高账户安全性
                  </div>
                </div>
                <button class="btn-outline">
                  修改密码
                </button>
              </div>
            </div>
            
            <!-- 双因素认证 -->
            <div class="mb-6 p-4 border rounded-lg">
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium mb-1">双因素认证</div>
                  <div class="text-sm text-gray-500">
                    <span class="text-red-600">未开启</span>
                  </div>
                </div>
                <button class="btn-outline">
                  开启
                </button>
              </div>
            </div>
            
            <!-- 登录设备 -->
            <div class="p-4 border rounded-lg">
              <div class="font-medium mb-4">登录设备管理</div>
              <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded">
                  <div class="flex items-center space-x-3">
                    <div class="i-mdi-laptop text-2xl text-gray-600" />
                    <div>
                      <div class="text-sm font-medium">Windows PC</div>
                      <div class="text-xs text-gray-500">最后活动：刚刚</div>
                    </div>
                  </div>
                  <span class="text-xs text-green-600">当前设备</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 通知设置 -->
          <div v-else-if="activeTab === 'notification'" class="card p-6">
            <h2 class="text-xl font-bold mb-6">通知设置</h2>
            
            <div class="space-y-4">
              <div class="flex items-center justify-between p-4 border rounded-lg">
                <div>
                  <div class="font-medium mb-1">订单通知</div>
                  <div class="text-sm text-gray-500">
                    订单状态变更时接收通知
                  </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                </label>
              </div>
              
              <div class="flex items-center justify-between p-4 border rounded-lg">
                <div>
                  <div class="font-medium mb-1">系统公告</div>
                  <div class="text-sm text-gray-500">
                    接收平台最新公告和活动信息
                  </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" class="sr-only peer" checked>
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                </label>
              </div>
              
              <div class="flex items-center justify-between p-4 border rounded-lg">
                <div>
                  <div class="font-medium mb-1">邮件通知</div>
                  <div class="text-sm text-gray-500">
                    通过邮件接收重要通知
                  </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" class="sr-only peer">
                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 隐私设置 -->
          <div v-else-if="activeTab === 'privacy'" class="card p-6">
            <h2 class="text-xl font-bold mb-6">隐私设置</h2>
            
            <div class="space-y-4">
              <div class="p-4 border rounded-lg">
                <div class="font-medium mb-2">个人资料可见性</div>
                <div class="space-y-2">
                  <label class="flex items-center space-x-2">
                    <input type="radio" name="privacy" value="public" checked>
                    <span class="text-sm">公开</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="radio" name="privacy" value="private">
                    <span class="text-sm">仅自己可见</span>
                  </label>
                </div>
              </div>
              
              <div class="p-4 border rounded-lg">
                <div class="font-medium mb-2 text-red-600">危险操作</div>
                <button class="btn-outline text-red-600 border-red-600 hover:bg-red-50">
                  <div class="i-mdi-delete inline-block mr-2" />
                  注销账户
                </button>
                <p class="text-xs text-gray-500 mt-2">
                  注销后账户将无法恢复，请谨慎操作
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})

const activeTab = ref('profile')

const tabs = [
  { id: 'profile', label: '基本信息', icon: 'i-mdi-account' },
  { id: 'security', label: '安全设置', icon: 'i-mdi-shield-lock' },
  { id: 'notification', label: '通知设置', icon: 'i-mdi-bell' },
  { id: 'privacy', label: '隐私设置', icon: 'i-mdi-eye-off' },
]

const profile = reactive({
  username: '用户名',
  email: 'user@example.com',
  phone: '',
})

function handleSaveProfile() {
  console.log('保存个人信息', profile)
  alert('保存成功')
}

// SEO
useSeoMeta({
  title: '账户设置 - 代码小库',
  robots: 'noindex',
})
</script>


